<!--v-for为for循环  从breadcrumb中遍历出来的数据，item代表值，index为下标-->
<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item
        v-for="(item,index) in breadList"
        :key="index"
        :to="{ path: item.path}">
        {{item.name}}
      </el-breadcrumb-item>
    </el-breadcrumb>
    <br>
  </div>
</template>

<script>
  export default {
    name: "Breadcrumb",
    data() {
      return {
        breadList: [],  //路由集合
      }
    },
    watch: { //路由改变的时候监听
      $route() {
        this.updateBread();
      },
      immediate: true
    },
    created() {
      this.updateBread();
    },
    methods: {
      updateBread() {
        //获取当前路由信息
        let matched = this.$route.matched;
        //判断当前路由是否是首页
        if (!matched[0].path === "/") {
          matched = [{path: "/home", meta: {title: "首页"}}].concat(matched);
        }
        this.breadList = matched;
      }
    }
  }
</script>

<style scoped>

</style>
